<template>
    <button class="btn">
        <slot></slot>
    </button>
</template>
<script setup>
import { ref } from 'vue'

</script>
<style scoped lang="scss">
.btn {
    padding: 7px 13px;
    background-color: #046F4E;
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    font-size: 32px;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;
    font-feature-settings: "kern" on;
    color: #fff;

    &:hover {
        cursor: pointer;
        background-color: #22534B;
        color: #CFE7FA;
    }

    &.active {
        background: linear-gradient(180deg, #41B3FF 0%, rgba(12, 65, 135, 0.85) 100%);
        color: #CFE7FA;
    }
}
</style>